<template>
    <div class="all">
        <!-- 账户设置header -->
        <div class="header">
            <div>
                <span class="space">&nbsp;</span>
                <span>账户设置</span>
            </div>
        </div>
        <!-- 账户设置container -->
        <div class="container">
            <div class="accountSet">
                <div class="header"><span>账号设置</span></div>
                <div>
                    <div>
                        <i class="iconfont icon-yonghu-yuan"></i>
                        <span>上传头像</span>
                    </div>
                    <el-form :model="form" label-width="100px" class="demo-ruleForm userForm">
                        <el-form-item>
                            <template slot="label">账号：</template>
                            <el-input name="user" v-model="form.userName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <template slot="label">角色：</template>
                            <el-input name="role" disabled v-model="form.role"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <template slot="label">姓名：</template>
                            <el-input name="name" v-model="form.nickName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <template slot="label">邮箱：</template>
                            <el-input name="name" v-model="form.email"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <template slot="label">手机号：</template>
                            <el-input name="name" v-model="form.phonenumber"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <template slot="label">旧密码：</template>
                            <el-input name="name" v-model="oldPwd" type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <template slot="label">新密码：</template>
                            <el-input name="name" v-model="newPwd" type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <template slot="label">确认密码：</template>
                            <el-input name="name" v-model="confirmPwd" type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="saveBtn" @click="saveBtn(); submitForm()">保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
export default {
    name: 'ThirdAccountSettingsView',

    data() {
        return {
            form: [],
            oldPwd: '',//旧密码，判断和user中的密码是否相同
            newPwd: '',//新密码，要修改的密码
            confirmPwd: '',//确认密码，判断和要修改的新密码是否相同

        };
    },
    created() {
        // 赋值
        this.form = this.$store.state.user
        // console.log('form',this.form);
    },

    computed: {
        // 从getter中获取账户信息
        ...mapGetters('home', ['getAccountInfo'])
    },

    mounted() {

    },

    methods: {
        ...mapActions('home', ['updateUser']),
        open() {
            this.$message('修改成功');
        },
        saveBtn() {
            console.log(1);//测试是否调用方法
            let afterForm = this.$store.state.user
            // 传参赋值
            let userId = afterForm.userId
            let userName = this.form.userName
            let nickName = this.form.nickName
            let email = this.form.email
            let phonenumber = this.form.phonenumber
            let password = this.newPwd
            // 当前登陆时的页面渲染改成用户修改后的数据
            this.form.userName = userName
            this.form.nickName = nickName
            this.form.email = email
            this.form.phonenumber = phonenumber

            console.log('userID', afterForm.userId, 'userName', userName, 'nickName', nickName, 'email', email, "phonenumber", phonenumber, 'pwd', password);

            // 在调用保存修改向后端发起请求时，需要在这边传一个当前用户的id值
            this.updateUser({ userId, userName, nickName, email, phonenumber, password }).then(res => {
                console.log(res);
                console.log('store', this.$store.state.user);
                this.open()
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

    },
};
</script>

<style  scoped>
* {
    padding: 0;
    margin: 0;
}

.all {
    float: right;
    background-color: #f1f1f1;
    width: 100%;
}

.all>.header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    font-size: 18px;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
}

.header .space {
    margin-right: 6px;
    background-color: rgb(28, 176, 154);
}

.header button {
    padding: 5px 10px;
}

.container>div {
    margin: 30px 40px;
}

.accountSet {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: -8px 10px 5px rgba(6, 6, 6, .1);
}

.accountSet .header {
    padding: 12px 20px 0;
}

.accountSet>div:nth-child(2)>div:nth-child(1) {
    width: 180px;
    text-align: center;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.accountSet>div:nth-child(2)>div:nth-child(1) i {
    font-size: 100px;
}

.userForm {
    width: 470px;
    margin: auto;
}

.accountSet /deep/ .el-form-item__label {
    padding-right: 20px;
}

.accountSet /deep/ .el-input {
    padding: 5px 0;
}

.saveBtn {
    padding: 10px 20px;
    margin: 0 0 12px 0;
}
</style>